<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>2D 转换（CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。）</title>
		<style>
			.box1 {
				width: 200px;
				height: 100px;
				background-color: yellow;
				/* tate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 */
				transform: rotate(13deg);
			}

			.box2 {
				width: 200px;
				height: 100px;
				background-color: red;
				/* translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
				transform: translate(100px, 50px);
			}

			.box3 {
				width: 200px;
				height: 100px;
				background-color: blue;
				/* scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：1.0为原始大小，0.5为缩小一半，2.0为放大两倍。 */
				transform: scale(0.5);
			}

			.box4 {
				width: 200px;
				height: 100px;
				background-color: green;
				/* skew()方法，该元素沿着X轴和Y轴倾斜的角度，以弧度计。*/
				transform: skewX(30deg);
			}

			.box5 {
				width: 200px;
				height: 200px;
				background-color: purple;
				/*
        matrix()方法，可以对元素进行任意2D转换。

        matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
        matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
        scaleX() (水平缩放)：控制元素水平方向的缩放。如果值为 1，则不进行水平缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
        skewY() (垂直倾斜)：控制元素在垂直方向上的倾斜。
        skewX() (水平倾斜)：控制元素在水平方向上的倾斜。
        scaleY() (垂直缩放)：控制元素垂直方向的缩放。如果值为 1，则不进行垂直缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
        translateX() (水平平移)：控制元素在水平方向上的平移量。
        translateY() (垂直平移)：控制元素在垂直方向上的平移量。
        */
				transform: matrix(0.5, 0.5, -0.5, 0.866, 0, 0);
			}
		</style>
	</head>
	<body>
		<div class="box1">元素整体旋转deg度</div>
		<div class="box2">元素整体移动位置</div>
		<div class="box3">元素整体缩放</div>
		<div class="box4">元素整体倾斜</div>
		<div class="box5">元素整体任意变换</div>
	</body>
</html>
